<template>
  <div>
    <div  v-if="key==''">
    <!-- 字母序城市列表 -->
    <div class="city-bSMF7_0">
      <div class="city-EAJ1X_0">
        <p class="city-1bnTP_0">
          当前定位城市
        </p>
        <div class="city-5r26m_0">{{nowCity}}</div>
      </div>
      <div id="list" v-for="city in citys">
        <div id="city.idx" class="city-3Obwy_0">
          <div class="city-1bnTP_0">{{city.idx}}</div>
          <div class="city-5r26m_0" v-for="item in city.cities">
            <span @click="_setNowCity(item.name,item.latitude,item.longitude)">{{item.name}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 字幕索引 -->
    <div class="city-2_cDS_0">
      <span v-for="letter in indexs">{{letter}}</span>
    </div>
    </div>

    <div v-if="key!=''">
      <div class="city-5r26m_0 font-sm" v-for="item in filterCitys">
        <span @click="_setNowCity(item.name,item.latitude,item.longitude)">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getAllCityInfo} from "api/city-info"
  import {mapGetters} from 'vuex'
    export default {
      name: "city-list",
      data(){
        return {
          citys:[],
          cityList:[],
          indexs:[],
          temp:[]
        }
      },
      created(){
        this._loadAllCity();

      },
      computed:{
        ...mapGetters({
          key:'getKey',
          nowCity:'getNowCity'
      }),
        filterCitys(){
          let key =  this.key;
          return this.cityList.filter(function (item) {
            let str = item.name;
            return str.indexOf(key) !=  -1;
          });
        // .filter((item) => this.key.contains(item.cities.name));
        }
      },
      methods:{
        _loadAllCity(){
          getAllCityInfo(this.$http).then(
            res => {
              this.citys = res.data.cityList;
              this.indexs = res.data.alphabet;
              this._makeUpCityList();
              console.log(res.data);
            },
            res => {
              console.log("load all setcity data fail")
            }
          )
        },
        _setNowCity(name,x,y){
          const cityPos = {
            name:name,
            x:x,
            y:y
          }
          this.nowCity = name;
          this.$store.commit('setNowCity',cityPos);
          this.$router.back();
        },
        _makeUpCityList(){
          for(let i = 0;i < this.citys.length;i++){
            // for(let j= 0;j < this.citys.cities.length)
              for(let j = 0; j < this.citys[i].cities.length; j++){
                this.cityList.push(this.citys[i].cities[j]);
              }
          }
        }
      }
    }
</script>

<style scoped>
  *, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
  }
  .city-bSMF7_0 {
    height: 100%;
    overflow-y: scroll;
  }
  .city-EAJ1X_0 {
    font-size: .67rem;
  }
  .city-1bnTP_0, .city-5r26m_0 {
    border-bottom: 1px solid #ddd;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .city-1bnTP_0 {
    color: #666;
    background: #f5f5f5;
    padding: .373333rem 0 .186667rem .4rem;
    padding: 3.733333vw 0 1.866667vw 4vw;
  }
  .city-5r26m_0 {
    height: 1.333333rem;
    height: 13.333333vw;
    margin-left: .4rem;
    margin-left: 4vw;
    line-height: 1.333333rem;
    line-height: 13.333333vw;

  }

  .city-5r26m_0:last-child {
    border: none;
  }
  .city-3Obwy_0 {
    font-size: .67rem;
    color: #333;
  }
  .city-5r26m_0 span {
    display: inline-block;
    width: 80%;
    height: 100%;
  }
  .city-2_cDS_0 {
    position: absolute;
    right: .266667rem;
    right: 2.666667vw;
    top: 4rem;
    top: 40vw;
    width: .533333rem;
    width: 5.333333vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    color: #999;
  }
  .city-2_cDS_0 span {
    width: 100%;
    height: .533333rem;
    height: 5.333333vw;
    line-height: .533333rem;
    line-height: 5.333333vw;
    font-size: .33rem;
  }
  .font-sm span{
    font-size: .40rem;
  }
</style>
